<template>
	<view class="scope-container">
		<!-- <TextNavBar :title="info.title"></TextNavBar> -->
		<view class="content">
			<view class="top-c">
				<swiper autoplay class="swiper-scope">
					<swiper-item class="swi" v-for="(item, index) in info.images">
						<image :src="item" class="thumb" mode="aspectFill"></image>
					</swiper-item>
				</swiper>

			</view>

			<view class="suo-box" v-if="lock_info.time > 0" @click="cancelSuo">
				<image v-if="lock_info.avator" :src="lock_info.avator" mode="aspectFit"
					style="width: 60rpx; height: 60rpx; border-radius: 30rpx;"></image>
				<image v-else src="https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/static/logo.png"
					mode="aspectFit" style="width: 60rpx; height: 60rpx; border-radius: 30rpx;"></image>
				<view class="name">{{lock_info.msg}}锁箱</view>
				<view class="time">{{lock_info.time}}</view>s
			</view>

			<view v-if="flag" class="body animated" :class="{bounceOutRight: startMoving, bounceInLeft: !startMoving}">
				<view class="title-c">
					<view class="left">
						<view class="title">{{info.title}}</view>
						<!-- <view class="sub-title">{{info.sub_title}}</view> -->
					</view>
					<view class="right" v-show="flag">
						<view class="price" v-show="false">
							<PriceDisplay :info="info" :shadowClass="shadowClass"></PriceDisplay>/张
						</view>
						<view class="stock">
							剩{{info.room && info.room.stock}}张/共{{info.room.total}}张
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="oper" v-show="flag">
					<view class="huanxiang" @tap="showRoomPopup"></view>
					<view class="center">
						<!-- <view class="left" @tap="showRecordList"></view>
						<view class="right" @tap="showTips"></view> -->
						<view class="jilu" @tap="showRecordList">开赏记录</view>
					</view>
					<view class="shuaxin" @tap="refreshRoom"></view>
				</view>
				<!-- 箱子操作 -->
				<view class="box-oper" v-show="flag">
					<view class="pre" @tap="lastRoom"></view>
					<view class="center">
						第<text v-if="info.room && info.room.num"
							class="number">{{info.room.num | fixNumber}}</text>箱/共<text v-if="info.room_total"
							class="number">{{info.room_total}}</text>箱
					</view>
					<view class="next" @tap="nextRoom"></view>
				</view>
				<view class="sku-list">
					<view class="item" v-for="(item, index) in info.skus" :key="item.id">
						<view class="thumb">
							<view class="sell-out-c" v-if="!item.stock">
								<image mode="widthFix" class="sell-out" src="@/static/empty-stock-2.png"></image>
							</view>
							<image class="new_img" mode="aspectFill"
								:src="item.thumb + '?x-oss-process=image/resize,w_300'"></image>
							<view class="total" v-show="flag">{{item.stock}}/{{item.total}}</view>
							<view class="shang-title" :class="{'gift': item.shang_type === 1}">{{item.shang_title}}
							</view>
						</view>
						<view class="title">{{item.title}}</view>

						<view class="display-price" v-show="false">
							<view class="key">零售价:</view>
							<view class="value">
								<text v-if="item.display_money_price">
									{{item.display_money_price / 100}}元
								</text>
								<PriceDisplay :info="info" v-else></PriceDisplay>
							</view>
						</view>
						<view class="display-price">
							<template v-if="item.shang_type === 1">
								<text>只赠不售</text>
							</template>
							<template v-else>
								<text clas="key">概率:</text>
								<text class="value">{{item.odds}}%</text>
							</template>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="body body-1 animated" :class="{bounceOutRight: startMoving, bounceInLeft: !startMoving}">
				<view class="title-c">
					<view class="left">
						<view class="title">{{info.title}}</view>
						<!-- <view class="sub-title">{{info.sub_title}}</view> -->
					</view>
					<view class="right" v-show="flag">
						<view class="price" v-show="false">
							<PriceDisplay :info="info" :shadowClass="shadowClass"></PriceDisplay>/张
						</view>
						<view class="stock">
							剩{{info.room && info.room.stock}}张/共{{info.room.total}}张
						</view>
					</view>
				</view>
				<!-- 操作 -->
				<view class="oper" v-show="flag">
					<view class="huanxiang" @tap="showRoomPopup"></view>
					<view class="center">
						<!-- <view class="left" @tap="showRecordList"></view>
						<view class="right" @tap="showTips"></view> -->
						<view class="jilu" @tap="showRecordList">开赏记录</view>
					</view>
					<view class="shuaxin" @tap="refreshRoom"></view>
				</view>
				<!-- 箱子操作 -->
				<view class="box-oper" v-show="flag">
					<view class="pre" @tap="lastRoom"></view>
					<view class="center">
						第<text v-if="info.room && info.room.num"
							class="number">{{info.room.num | fixNumber}}</text>箱/共<text v-if="info.room_total"
							class="number">{{info.room_total}}</text>箱
					</view>
					<view class="next" @tap="nextRoom"></view>
				</view>
				<view class="sku-list">
					<view class="item" v-for="(item, index) in info.skus" :key="item.id">
						<view class="thumb">
							<view class="sell-out-c" v-if="!item.stock">
								<image mode="widthFix" class="sell-out" src="@/static/empty-stock-2.png"></image>
							</view>
							<image class="new_img" mode="aspectFill"
								:src="item.thumb + '?x-oss-process=image/resize,w_300'"></image>
							<view class="total" v-show="flag">{{item.stock}}/{{item.total}}</view>
							<view class="shang-title" :class="{'gift': item.shang_type === 1}">{{item.shang_title}}
							</view>
						</view>
						<view class="title">{{item.title}}</view>
			
						<view class="display-price" v-show="false">
							<view class="key">零售价:</view>
							<view class="value">
								<text v-if="item.display_money_price">
									{{item.display_money_price / 100}}元
								</text>
								<PriceDisplay :info="info" v-else></PriceDisplay>
							</view>
						</view>
						<view class="display-price" v-show="flag">
							<template v-if="item.shang_type === 1">
								<text>只赠不售</text>
							</template>
							<template v-else>
								<text clas="key">概率:</text>
								<text class="value">{{item.odds}}%</text>
							</template>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- <image class="refresh-btn1" mode="widthFix" @tap="tryGame"
			src="https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/shiwan.png" /> -->
		<view class="footer-c" v-show="flag">
			<view class="left">
				<view :class="isEnableBtn(1)?'btn1':'btn1 gray1'" @tap="buy(1)"></view>
				<view :class="isEnableBtn(3)?'btn2':'btn2 gray2'" @tap="buy(3)"></view>
				<view :class="isEnableBtn(10)?'btn3':'btn3 gray3'" @tap="buy(10)"></view>
			</view>
			<view :class="isEnableBtn(10)?'right':'right gray'" @tap="buy(0)"></view>
		</view>

		<PayCard :presell_date = "info.presell_date" :info="payInfo" @close="hidePayPopup" @success="paySuccess" v-if="isPayPopup"></PayCard>

		<RoomPopup v-if="isRoomPopup" @select="changeRoom" @close="hideRoom()" :info="info" :room="info.room">
		</RoomPopup>
		<RecordList v-if="isRecordList" @close="hideRecordList()" :info="info" :room="info.room"></RecordList>


		<uni-popup style="z-index: 1000;" ref="detailPopup" type="bottom">
			<BoxSkuPopup :skuList="info.skus" :detailImageList="info.detail_images" @close="hideSkuPopup"></BoxSkuPopup>
		</uni-popup>

		<!-- <view @click="toBox" class="float-btn my hegui" hover-class="hover"></view> -->
		<view @click="toTujian" class="float-btn my tujian" hover-class="hover" v-if="info.is_handbook == 1" v-show="flag"></view>


		<SharePopup v-if="isSharePopup" @close="hideSharePopup" :info="posterInfo"></SharePopup>

		<OpenBoxPopup :isNavbarEnable="true" :info="info" v-if="isOpenPopup" :order="order" @close="goBack"
			:tryMode="tryMode" :tryInfo="tryInfo" :boxImg="info.image_3d" />

		<FreeTicketFloatBtn v-if="info.is_invite_enabled" @useFreeTicket="useFreeTicket" :uuid="uuid"
			nodeType="yifanshang"></FreeTicketFloatBtn>

	</view>
</template>

<script>
	import PayCard from "./components/PayCard.vue"
	import RoomPopup from "./components/RoomPopup.vue"
	import RecordList from "./components/RecordList.vue"
	// import OpenBoxPopup from "./components/OpenBoxPopup.vue"
	import {
		mapGetters
	} from "vuex"
	export default {
		components: {
			PayCard,
			RoomPopup,
			RecordList,
			// OpenBoxPopup
		},
		data() {
			return {
				flag:false,
				shadowClass: "text-shadow:2px ​2px 0px #000, 0px 1px 0px #000",
				uuid: "",
				info: {
					room: {}
				},
				payTotal: 0,
				isPayPopup: false,
				isRoomPopup: false,
				startMoving: false,
				selectedRoom: {},
				isShowDetail: false,
				isOpenPopup: false, // 是否开盒
				isRecordList: false,
				isSharePopup: false,
				order: {}, // 支付成功后的订单
				roomId: '',

				tryMode: false,
				tryInfo: {},
				danmu:[],
				lock_info: {

				},
				intervalID: 0,
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
			payInfo() {
				if (!this.info || !this.info.room) {
					return {}
				}

				return {
					room_id: this.info.room.id,
					pay_total: this.payTotal,
					title: this.info.title,
					money_price: this.info.money_price,
					score_price: this.info.score_price
				}
			},
			isAllPickDisable() {
				return !this.info.last_stock_all_pick_enable || (this.info.last_stock_all_pick_enable > this.info.room
					.stock)
			},
			share() {
				return {
					title: '[第' + this.info.room.num + '箱]' + this.info.title,
					// thumb: this.info.thumb,
					path: '/pages/yifanshang/detail?uuid=' + this.info.uuid + '&roomId=' + this.info.room.id +
						'&invite_node=yifanshang-' + this.info.uuid
				}
			},
			showSkuTitleList() {
				let list = JSON.parse(JSON.stringify(this.info.skus || []))
				return list.splice(0, 6)
			},
			posterInfo() {
				return {
					money_price: this.info.money_price,
					score_price: this.info.score_price,
					title: this.info.title,
					path: this.getShareConfig().path,
					thumb: this.info.thumb
				}
			},
		},
		watch: {},
		filters: {
			fixNumber(val) {
				if (val < 10) {
					return '0' + val
				}
				return val
			}
		},
		onLoad(e) {
			this.uuid = e.uuid
			this.roomId = e.roomId || ''
			// this.loadDanmu();
			uni.$on('startShare', () => {
				this.isSharePopup = true
			})
			this.checkFlag();
		},
		onUnload() {

		},
		onPullDownRefresh() {
			this.$showPullRefresh()
			this.initData()
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			})
			this.initData().then(res => {
				uni.hideLoading()
			})
		},
		onReachBottom() {},
		methods: {
			checkFlag(){
				this.$http(`/version`, 'GET', {
					
				}).then(res => {
					console.log('-------------');
					this.flag = res.data.value;
				})
			},
			cancelSuo(){
				if(this.userInfo.id == this.lock_info.user_id){
					//如果是同一个人就可以选择是否取消
					uni.showModal({
						title: '锁箱',
						content: '是否要取消锁箱？',
						success: (res) => {
							if(res.confirm) {
								this.$http(`/yifanshang/unlock`, 'GET', {
									room_id: this.roomId,
								}).then(res => {
									this.getCacheTime();
								})
							}
						}
					})
				}
			},
			toTujian() {
				console.log('----------');
				console.log(this.info.id);
				uni.navigateTo({
					url: '/pages/collection/detail?id=' + this.info.id + '&title=' + this.info.title
				})
			},
			toBox() {
				//先记录上一个箱子
				uni.setStorageSync('m_uuid', this.uuid);
				uni.setStorageSync('m_roomId', this.roomId);
				uni.switchTab({
					url: '/pages/myBox/index'
				})

			},
			formatPrice(price) {
				return (price / 100).toFixed(2)
			},
			getCacheTime() {
				var self = this;
				this.$http(`/yifanshang/getCacheTime`, 'POST', {
					room_id: this.roomId,
				}).then(res => {
					console.log(res);
					self.lock_info = res.data;
					clearInterval(self.intervalID);
					if (self.lock_info.time > 0) {
						self.intervalID = setInterval(() => {
							self.lock_info.time = self.lock_info.time - 1;
							if (self.lock_info.time == 0) {
								self.getCacheTime();
							}
						}, 1000);
					}
				})
			},
			lastRoom() {
				if (this.info.room.num === 1) {
					uni.showToast({
						title: '没有上一箱了~',
						icon: 'none'
					})
					return false
				}
				this.changeRoom({
					id: this.roomId - 1
				})
			},
			nextRoom() {
				if (this.info.room.num == this.info.room_total) {
					uni.showToast({
						title: '没有下一箱了~',
						icon: 'none'
					})
					return false
				}
				this.changeRoom({
					id: this.roomId + 1
				})
			},
			// 使用1次兑换记录
			useFreeTicket() {
				uni.showLoading({
					title: '提交中',
					icon: 'none'
				})

				this.$http('/yifanshang/orders', 'POST', {
					room_id: this.info.room.id,
					pay_total: 1,
					is_use_free_ticket: 1
				}).then(res => {
					uni.hideLoading()
					let info = res.data
					if (info.is_need_pay) {
						uni.showToast({
							title: '兑换出错~',
							icon: 'none'
						})
					} else {
						this.paySuccess(info.order)
					}
				})
			},
			hideSharePopup() {
				this.isSharePopup = false
			},
			isEnableBtn(total) {

				// 抽*发按钮是否可用
				let flag = true

				if (total === 0) {
					flag = !this.info.is_limit_1 && this.isAllPickDisable && this.info.room.stock
				} else if (total === 1) {
					flag = this.info.room && this.info.room.stock
				} else {
					flag = !this.info.is_limit_1 && this.info.room.stock
				}

				return flag
			},
			hideRecordList() {
				this.isRecordList = false
			},
			showRecordList() {
				this.isRecordList = true
			},
			showTips() {
				uni.navigateTo({
					url: '/pages/rule/index?type=yifanshang'
				})
			},
			initData() {
				return this.$http(`/yifanshangs/${this.uuid}`, 'GET', {
					room_id: this.roomId
				}).then(res => {
					console.log(res.data.info);
					this.info = res.data.info

					// this.isLike = this.info.is_liked
					this.roomId = this.info.room && this.info.room.id

					// this.isRecordList = true

					// 加载评论
					// this.initCommentList()

					//
					this.getCacheTime();
					this.$visitor.record({
						type: 'yfs_detail',
						title: this.info.title + '，第' + this.info.room.num + '箱',
						uuid: this.info.uuid
					});
				})
			},
			hidePayPopup() {
				this.isPayPopup = false
			},
			showSkuPopup() {
				this.$refs.detailPopup.open('bottom')
				// this.isShowDetail = true
			},
			hideSkuPopup() {
				this.$refs.detailPopup.close()
				// this.isShowDetail = false
			},
			// 点击购买
			buy(total) {
				if (!this.isEnableBtn(total)) {
					return false
				}

				this.payTotal = total
				this.isPayPopup = true
			},
			showRoomPopup() {
				console.log('click ===')
				this.isRoomPopup = true
			},
			refreshRoom() {
				// this.showAnimate()
				// this.roomId = ''   // 删除roomid，使其随机
				uni.showLoading({
					title: '刷新中...'
				})
				this.initData().then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '刷新完成~',
						icon: 'none'
					})
				})
				this.getCacheTime();
			},
			changeRoom(room) {
				this.selectedRoom = room
				this.roomId = room.id
				this.isRoomPopup = false

				this.showAnimate()
				this.initData()
			},
			showAnimate() {
				this.startMoving = true
				setTimeout(() => {
					this.startMoving = false
				}, 300)
			},
			hideRoom() {
				this.isRoomPopup = false
			},
			paySuccess(order) {
				// 线上开盒流程
				this.isPayPopup = false
				uni.showToast({
					title: "支付成功, 抽赏中",
					icon: "none"
				})
				this.order = order
				this.isOpenPopup = true
				this.getCacheTime();
			},
			goBack() {
				this.isOpenPopup = false
				this.tryMode = false
				this.tryInfo = {}
				this.initData()
			},
			//加载弹幕
			loadDanmu() {
				console.log(123);
				this.$http(`/yifanshang/barrage/${this.uuid}`, 'GET', {

				}).then(res => {
					this.danmu = res.data.info;
					this.$refs.vBarrage.init(this.danmu);
				})
			},
			//试玩的方法
			tryGame() {

				this.$http(`/yifanshang/sabi/${this.uuid}`, 'GET', {
					try_total: 1,
					room_id: this.roomId,
				}).then(res => {
					console.log(res);
					this.tryInfo = {
						package_uuid: res.data.package_uuid
					}

					this.tryMode = true
					this.isOpenPopup = true;
				})
			},
		},
		onPageScroll(e) {}
	}
</script>

<style lang="scss" scoped>
	.scope-container {
		// padding-top: 150rpx;
		min-height: 100vh;
		box-sizing: border-box;

		.content {
			background-color: #000;
			.danmu{
				width: 750rpx;
				height: 350rpx;
				position: absolute;
				top: 0rpx;
				z-index: 1;
			}
		}
	}

	.suo-box {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.1));
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		position: absolute;
		top: 250rpx;
		left: -5rpx;
		color: #fff;

		.name {
			padding: 0 5rpx;
			font-family: alimama;
			max-width: 250rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		.time {
			padding: 0 5rpx;
			font-family: alimama;
			font-size: 36rpx;
		}
	}

	.float-btn {
		position: fixed;
		width: 150rpx;
		height: 80rpx;
		border-radius: 33px 0px 0px 33px;
		padding: 0rpx 14rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-weight: 500;
		font-size: 24rpx;
		z-index: 2;
		image {
			width: 30rpx;
			height: 36rpx;
		}

		&.my {

			// top: 150rpx;
			image {
				width: 30rpx;
				height: 40rpx;
			}
		}

		&.share {

			// top: 800rpx;
			.icon-wechat {
				font-size: 40rpx;
			}
		}
	}

	.hegui {
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/hegui.png);
		background-size: 100%;
		right: 0rpx;
		top: 120rpx;
	}

	.tujian {
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/tujian.png);
		background-size: 100%;
		right: 0rpx;
		top: 220rpx;
	}

	.top-c {
		width: 750rpx;
		height: 360rpx;
		// position: absolute;
		position: relative;
		// top: 142rpx;
		// left: 92rpx;
		// border-radius: 10rpx;
		// margin: 400rpx auto 0rpx auto;
		overflow: hidden;
		box-shadow: 0px 20rpx 52rpx 0px rgba(143, 143, 143, 0.1);

		.swiper-scope {
			overflow: hidden;
			width: 100%;
			height: 100%;

			swiper-item {
				width: 100%;
				height: 100%;
			}

			.thumb {
				width: 100%;
				height: 100%;
			}
		}

		.float-price-c {
			background: rgba(0, 0, 0, 0.6);
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			color: white;
			font-weight: 700;
			font-size: 26rpx;
			padding: 10rpx 30rpx;
			border-radius: 4rpx;
			// z-index: 100;

			.item {
				display: flex;
				justify-content: space-between;
			}

			.free-order {
				color: red;
			}
		}

		.bottom-c {
			background: url('@/static/activity/shadow.png');
			background-repeat: no-repeat;
			background-size: 110% auto;
			background-position: -10rpx bottom;
			width: 100%;
			height: 300rpx;
			// border: 1px solid red;
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			pointer-events: none;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			color: white;
			font-weight: 500;
			font-size: 26rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;

			.yellow-font {
				color: #FFEA06;
			}
		}
	}

	.t {
		.bottom-c1 {
			// background: url('@/static/activity/shadow.png');
			// background-repeat: no-repeat;
			// background-size: 110% auto;
			// background-position: -10rpx bottom;
			width: 100%;
			// height: 100rpx;
			// border: 1px solid red;
			// position: absolute;
			// bottom: 0rpx;
			// left: 0rpx;
			pointer-events: none;
			display: flex;
			// align-items: flex-end;
			justify-content: space-between;
			// color: white;
			font-weight: 500;
			// font-size: 26rpx;
			padding: 20rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;

			.left {
				font-size: 32rpx;
				font-weight: 700;
			}

			.price-c1 {
				font-size: 28rpx;
				font-weight: 700;
				color: #f13736;
			}

			.yellow-font {
				color: #FFEA06;
			}
		}

		.bottom-c2 {
			width: 100%;
			// height: 100rpx;
			// border: 1px solid red;
			// position: absolute;
			// bottom: 0rpx;
			// left: 0rpx;
			pointer-events: none;
			display: flex;
			// align-items: flex-end;
			justify-content: space-between;
			// color: white;
			font-weight: 500;
			font-size: 23rpx;
			padding: 10rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;
		}
	}




	.body {
		width: 100%;
		// background-color:#000;
		position: relative;
		margin-top: -10rpx;
		padding-bottom: 430rpx;

		.title-c {
			position: relative;
			padding-top: 40rpx;

			.left {
				margin-left: 30rpx;

				.title {
					font-family: alimama;
					font-size: 34rpx;
					color: #fff;
					font-weight: bold;
				}

				.sub-title {
					font-size: 24rpx;
					margin-top: 15rpx;
					color: #aeaeae;
					font-family: alimama;
				}
			}

			.right {
				position: absolute;
				right: 35rpx;
				top: 5rpx;

				.price {
					color: red;
					text-shadow: 1px 2px 1px #000, 2px 3px 1px #000;
					font-family: youshe;
				}

				.stock {
					margin-top: 30rpx;
					font-family: alimama;
					font-weight: bold;
					color: #fff;
					font-size: 24rpx;
					text-shadow: 1px 1px 0px #000, 2px 0px 5px #000;
				}
			}
		}

		.oper {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;

			.huanxiang {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/huanxiang.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 120rpx;
				height: 90rpx;
				margin-left: 15rpx;
			}

			.center {
				display: flex;
				align-items: center;
				.jilu{
					width: 400rpx;
					height: 70rpx;
					display: flex;
					align-items: center;
					background-color: #d2410a;
					font-size: 36rpx;
					font-family: youshe;
					color: white;
					justify-content: center;
					border-radius: 10rpx;
				}
				.left {
					background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/jilu.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 220rpx;
					height: 65rpx;
					margin-right: -40rpx;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
				}

				.right {
					background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/huoming.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					width: 220rpx;
					height: 65rpx;
					border-top-right-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}
			}

			.shuaxin {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/shuaxin.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 120rpx;
				height: 90rpx;
				margin-right: 15rpx;
			}
		}

		.box-oper {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20rpx;

			.pre {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/pre.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 180rpx;
				height: 80rpx;
			}

			.center {
				color: #fff;
				font-size: 36rpx;
				font-family: alimama;

				text {
					font-size: 38rpx;
					margin: 0rpx 10rpx;
					font-family: youshe;
					color: #ff5722;
				}
			}

			.next {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/next.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				width: 180rpx;
				height: 80rpx;
			}
		}

		.sku-list {
			overflow: hidden;
			width: 726rpx;
			margin-left: 12rpx;

			.item {
				float: left;
				margin-left: 18rpx;
				margin-top: 22rpx;
				width: 221rpx;
				height: 300rpx;
				box-sizing: border-box;
				border-radius: 12rpx;

				.thumb {
					position: relative;
					overflow: hidden;
					background: rgba(0, 0, 0, 0.5);
					position: relative;

					// background: url('@/static/activity/shadow.png');
					// background-repeat: no-repeat;
					// background-size: 100% auto;
					// background-position: 0rpx bottom;

					image {
						width: 221rpx;
						height: 221rpx;
						overflow: hidden;
						display: block;
						box-sizing: border-box;
					}

					.new_img {
						border: 2px solid;
						border-image: linear-gradient(to right, #f37538, #dcde67) 1;
					}

					.sell-out-c {
						position: absolute;
						width: 100%;
						height: 100%;
						background: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						.sell-out {
							width: 90rpx;
							height: 90rpx;
						}
					}

					.total {
						background: rgba(0, 0, 0, 0.5);
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
						color: white;
						position: absolute;
						top: 10rpx;
						left: 0rpx;
						z-index: 100;
						font-size: 20rpx;
						font-weight: bold;
					}

					.shang-title {
						background: #FFD223;
						border-radius: 6rpx;
						padding: 2rpx 10rpx;
						color: white;
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						z-index: 100;
						font-size: 20rpx;
						font-weight: bold;

						&.gift {
							background: #F15858;
						}
					}
				}

				.display-price {
					font-size: 22rpx;
					font-family: alimama;
					font-weight: 500;
					color: #b9b9b9;
					margin-top: 5rpx;
					display: flex;
					// justify-content: space-between;
				}

				.title {
					font-size: 24rpx;
					// font-family: alimama;
					font-weight: bold;
					color: #fff;
					width: 166rpx;
					text-align: left;
					margin-top: 10rpx;

					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	
	.body{
		background-image: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.body-1{
		background-color:black !important;
		background-image:none;
	}
	
	.footer-c {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/foot_bg.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		height: 280rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left {
			display: flex;
			align-items: center;
			margin-top: 85rpx;
			margin-left: 30rpx;

			.btn1,
			.btn2,
			.btn3 {
				width: 180rpx;
				height: 80rpx;
			}

			.btn1 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/yifa.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.gray1 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/yifa_1.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.btn2 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/sanfa.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.gray2 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/sanfa_1.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.btn3 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/shifa.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.gray3 {
				background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/shifa_1.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}

		.right {
			margin-top: 60rpx;
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/baoxiang.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			width: 200rpx;
			height: 130rpx;
		}

		.gray {
			background: url(https://baobao-1319614676.cos.ap-guangzhou.myqcloud.com/box/img/detail/baoxiang_1.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}

	.small-btn-c {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #A67C1D;
		line-height: 40rpx;
		padding: 30rpx 120rpx 0rpx 120rpx;
		width: 700rpx;
		box-sizing: border-box;

		border-top: 1px solid #F3F3F5;

		margin: 0rpx auto 30rpx auto;

		display: flex;
		justify-content: space-around;

		.btn {
			height: 30rpx;
		}
	}

	.refresh-btn1 {
		position: fixed;
		right: -10rpx;
		bottom: 220rpx;
		width: 180rpx;
		height: 180rpx;
		animation: shakeTopx 0.4s;
		animation-delay: 0.7s;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	@keyframes shakeTopx {
		0% {
			transform: rotate(-3deg);
		}

		25% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(3deg);
		}

		75% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(-3deg);
		}
	}

	.middle {
		display: flex;
		// align-items: center;
		// align-items: center;
		// justify-content: center;
		align-items: center;
		justify-content: center;
		z-index: 100;
		position: relative;
		padding: 0rpx 30rpx;

		.left-btn {
			width: 100rpx;
			flex: 0 100rpx;
			// flex: 1;
			height: 100rpx;
			// margin-left: 10rpx;
		}

		.refresh-btn {
			position: absolute;
			right: 20rpx;
			top: -240rpx;
			width: 180rpx;
			height: 180rpx;
		}



		.long-btn {
			width: 580rpx;
			// flex: 1;
			height: 90rpx;
			line-height: 90rpx;
			position: relative;
			// border: 1px solid red;
			// display: flex;

			// font-weight: 500;
			font-size: 28rpx;
			text-align: center;

			.number {
				font-weight: 500;
				font-size: 40rpx;
				margin: 0rpx 10rpx;
			}
		}

		.right-btn {
			width: 100rpx;
			flex: 0 100rpx;
			// flex: 1;
			height: 100rpx;
			margin-left: 10rpx;
		}
	}

	.btn-c {
		width: 700rpx;
		margin: 20rpx auto 0rpx auto;
		// margin-top: 20rpx;
		display: flex;
		justify-content: space-between;

		.btn {
			width: 172rpx;
			flex: 0 0 172rpx;
		}
	}
</style>